<div class="comment-container">
    <div id="vcomments" class="v">
        <div class="vwrap">
            <form onsubmit="return false">
                <div class="vheader item3">
                    <input th:if="${article ne null}" hidden="hidden" name="articleId" th:value="${article.id}"/>
                    <input th:if="${article ne null}" hidden="hidden" name="articleTitle" th:value="${article.title}"/>
                    <input maxlength="12" name="nick" placeholder="昵称" class="vnick vinput" type="text" required>
                    <input name="mail" placeholder="邮箱" class="vmail vinput" type="email" required>
                    <input name="link" placeholder="网址(http://)" class="vlink vinput" type="url" required>
                </div>
                <div class="vedit">
                    <textarea id="veditor" class="veditor vinput" placeholder="Your commnet here. Be cool." style="" required></textarea>
                    <div class="vctrl">
                        <span class="vemoji-btn" onclick="emojiBtn(this, event)">Emoji</span> | <span class="vpreview-btn">Preview</span>
                    </div>
                    <div class="vemojis" style="display:none"><i name="grinning" title="grinning">😀</i><i name="smiley" title="smiley">😃</i><i name="smile" title="smile">😄</i><i name="grin" title="grin">😁</i><i name="laughing" title="laughing">😆</i><i name="sweat_smile" title="sweat_smile">😅</i><i name="joy" title="joy">😂</i><i name="blush" title="blush">😊</i><i name="innocent" title="innocent">😇</i><i name="wink" title="wink">😉</i><i name="relieved" title="relieved">😌</i><i name="heart_eyes" title="heart_eyes">😍</i><i name="kissing_heart" title="kissing_heart">😘</i><i name="kissing" title="kissing">😗</i><i name="kissing_smiling_eyes" title="kissing_smiling_eyes">😙</i><i name="kissing_closed_eyes" title="kissing_closed_eyes">😚</i><i name="yum" title="yum">😋</i><i name="stuck_out_tongue_winking_eye" title="stuck_out_tongue_winking_eye">😜</i><i name="stuck_out_tongue_closed_eyes" title="stuck_out_tongue_closed_eyes">😝</i><i name="stuck_out_tongue" title="stuck_out_tongue">😛</i><i name="sunglasses" title="sunglasses">😎</i><i name="smirk" title="smirk">😏</i><i name="unamused" title="unamused">😒</i><i name="disappointed" title="disappointed">😞</i><i name="pensive" title="pensive">😔</i><i name="worried" title="worried">😟</i><i name="confused" title="confused">😕</i><i name="persevere" title="persevere">😣</i><i name="confounded" title="confounded">😖</i><i name="tired_face" title="tired_face">😫</i><i name="weary" title="weary">😩</i><i name="angry" title="angry">😠</i><i name="rage" title="rage">😡</i><i name="no_mouth" title="no_mouth">😶</i><i name="neutral_face" title="neutral_face">😐</i><i name="expressionless" title="expressionless">😑</i><i name="hushed" title="hushed">😯</i><i name="frowning" title="frowning">😦</i><i name="anguished" title="anguished">😧</i><i name="open_mouth" title="open_mouth">😮</i><i name="astonished" title="astonished">😲</i><i name="dizzy_face" title="dizzy_face">😵</i><i name="flushed" title="flushed">😳</i><i name="scream" title="scream">😱</i><i name="fearful" title="fearful">😨</i><i name="cold_sweat" title="cold_sweat">😰</i><i name="cry" title="cry">😢</i><i name="disappointed_relieved" title="disappointed_relieved">😥</i><i name="sob" title="sob">😭</i><i name="sweat" title="sweat">😓</i><i name="sleepy" title="sleepy">😪</i><i name="sleeping" title="sleeping">😴</i><i name="mask" title="mask">😷</i><i name="smiling_imp" title="smiling_imp">😈</i><i name="smiley_cat" title="smiley_cat">😺</i><i name="smile_cat" title="smile_cat">😸</i><i name="joy_cat" title="joy_cat">😹</i><i name="heart_eyes_cat" title="heart_eyes_cat">😻</i><i name="smirk_cat" title="smirk_cat">😼</i><i name="kissing_cat" title="kissing_cat">😽</i><i name="scream_cat" title="scream_cat">🙀</i><i name="crying_cat_face" title="crying_cat_face">😿</i><i name="pouting_cat" title="pouting_cat">😾</i><i name="cat" title="cat">🐱</i><i name="mouse" title="mouse">🐭</i><i name="cow" title="cow">🐮</i><i name="monkey_face" title="monkey_face">🐵</i><i name="hand" title="hand">✋</i><i name="fist" title="fist">✊</i><i name="v" title="v">✌️</i><i name="point_up" title="point_up">👆</i><i name="point_down" title="point_down">👇</i><i name="point_left" title="point_left">👈</i><i name="point_right" title="point_right">👉</i><i name="facepunch" title="facepunch">👊</i><i name="wave" title="wave">👋</i><i name="clap" title="clap">👏</i><i name="open_hands" title="open_hands">👐</i><i name="+1" title="+1">👍</i><i name="-1" title="-1">👎</i><i name="ok_hand" title="ok_hand">👌</i><i name="pray" title="pray">🙏</i><i name="ear" title="ear">👂</i><i name="eyes" title="eyes">👀</i><i name="nose" title="nose">👃</i><i name="lips" title="lips">👄</i><i name="tongue" title="tongue">👅</i><i name="heart" title="heart">❤️</i><i name="cupid" title="cupid">💘</i><i name="sparkling_heart" title="sparkling_heart">💖</i><i name="star" title="star">⭐️</i><i name="sparkles" title="sparkles">✨</i><i name="zap" title="zap">⚡️</i><i name="sunny" title="sunny">☀️</i><i name="cloud" title="cloud">☁️</i><i name="snowflake" title="snowflake">❄️</i><i name="umbrella" title="umbrella">☔️</i><i name="coffee" title="coffee">☕️</i><i name="airplane" title="airplane">✈️</i><i name="anchor" title="anchor">⚓️</i><i name="watch" title="watch">⌚️</i><i name="phone" title="phone">☎️</i><i name="hourglass" title="hourglass">⌛️</i><i name="email" title="email">✉️</i><i name="scissors" title="scissors">✂️</i><i name="black_nib" title="black_nib">✒️</i><i name="pencil2" title="pencil2">✏️</i><i name="x" title="x">❌</i><i name="recycle" title="recycle">♻️</i><i name="white_check_mark" title="white_check_mark">✅</i><i name="negative_squared_cross_mark" title="negative_squared_cross_mark">❎</i><i name="m" title="m">Ⓜ️</i><i name="i" title="i">ℹ️</i><i name="tm" title="tm">™️</i><i name="copyright" title="copyright">©️</i><i name="registered" title="registered">®️</i></div>
                    <div class="vinput vpreview" style="display:none"></div>
                </div>
                <div class="vcontrol">
                    <div class="col col-20" title="Markdown is supported">
                        <a href="https://segmentfault.com/markdown" target="_blank">
                            <svg class="markdown" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg>
                        </a>
                    </div>
                    <div class="col col-80 text-right">
                        <button type="button" onclick="vsubmit()" class="vsubmit vbtn">回复</button>
                    </div>
                </div>
            </form>
            <div style="display:none;" class="vmark"></div>
        </div>
        <div class="vinfo" style="display:block;">
            <div class="vcount col"><span class="vnum">[[${count}]]</span> 评论</div>
        </div>
        <div class="vlist">
            <div class="vcard" th:each="comment : ${talkList.rows}">
                <img class="vimg" src="https://gravatar.loli.net/avatar/c9cab676d09b0a8350da651629dd62a4?d=mp&amp;v=1.3.4">
                <div class="vh" th:id="'li-comment-' + ${comment.parent.id}">
                    <div class="vhead">
                        <a class="vnick" rel="nofollow" th:href="${comment.parent.url}" target="_blank" th:text="${comment.parent.name}"></a>
                        <span class="vsys">[[${#strings.substringBefore(comment.parent.device, ',')}]]</span>
                        <span class="vsys">[[${#strings.substringAfter(comment.parent.device, ',')}]]</span></div>
                    <div class="vmeta">
                        <span class="vtime" th:text="${#dates.format(comment.parent.time, 'yyyy-MM-dd')}"></span>
                        <span th:onclick="javascript:reply([[${comment.parent.name}]], [[${comment.parent.id}]]);" class="vat">回复</span>
                    </div>
                    <div class="vcontent">
                        <p th:text="${comment.parent.content}"></p>
                    </div>
                    <div class="vquote" th:if="${comment.childrenList} != '[]'">
                        <div class="vcard" th:each="item : ${comment.childrenList}">
                            <img class="vimg" src="https://gravatar.loli.net/avatar/d41d8cd98f00b204e9800998ecf8427e?d=mp&amp;v=1.3.4">
                            <div class="vh" th:id="'li-comment-' + ${item.id}">
                                <div class="vhead">
                                    <span class="vnick" th:text="${item.name}"></span>
                                    <span class="vsys">[[${#strings.substringBefore(item.device, ',')}]]</span>
                                    <span class="vsys">[[${#strings.substringAfter(item.device, ',')}]]</span>
                                </div>
                                <div class="vmeta">
                                    <span class="vtime" th:text="${#dates.format(item.time, 'yyyy-MM-dd')}"></span>
                                    <span class="vat" th:onclick="'javascript:reply([[${item.name}]], [[${item.pId}]], [[${item.id}]]);">回复</span>
                                </div>
                                <div class="vcontent">
                                    <a class="at" th:href="'#li-comment-' + ${item.cId == 0 ? item.pId : item.cId}" th:text="${item.cId}"></a>
                                    <p th:text="${item.content}"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="vempty" style="display:none;"></div>
        <div class="vpage txt-center"></div>
        <div class="lists-navigator clearfix">
            <ol class="page-navigator" th:if="${talkList.total > 0}">
                <li class="prev" th:if="${cp} gt '1'">
                    <a th:href="'?cp=' + ${cp < 1 ? cp : cp-1} + '#comment'">←</a>
                </li>
                <li th:each="i : ${#numbers.sequence(1, talkList.total)}">
                    <a th:style="${i == cp ? 'color: #eb5055;' : ''}" th:href="'?cp=' + ${i} + '#comment'" th:text="${i}"></a>
                </li>
                <li class="next" th:if="${cp < talkList.total}">
                    <a th:href="'?cp=' + ${cp < talkList.total ? cp+1 : talkList.total} + '#comment'">→</a>
                </li>
            </ol>
        </div>
    </div>
</div>